<script setup>

const row_data = defineModel("row_data", {type: Array, default: [] })
const total = defineModel("total", {type: Number, default: 0 })
const page_size = defineModel("page_size", {type: Number, default: 10 })
const current_page = defineModel("current_page", {type: Number, default: 0 })

</script>

<template>
  <el-container class="flow-content" style="padding: 0;">
    <el-main class="flow-main" style="padding: 0;">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table
              :height="height-10"
              stripe
              flexible
              table-layout="auto"
              style="width: 100%;"
              border :data="row_data">
            <slot name="default"/>
            <template #empty>
              <el-empty/>
            </template>
          </el-table>
        </template>
      </el-auto-resizer>
    </el-main>
    <el-footer height="40px" class="console-footer">
      <el-row class="stellar-content" justify="start" align="middle">
        <el-pagination background size="default"
                       :page-sizes="[10, 20, 50, 100]"
                       layout="total, sizes, prev, pager, next"
                       v-model:page-size="page_size"
                       v-model:current-page="current_page"
                       :total="total"
        />
      </el-row>
    </el-footer>
  </el-container>
</template>

<style scoped>

</style>